<template>
    <el-header class="box box-align-center box-pack-between fixed">
        <div class="logo box box-align-center ">
            <el-image class="image box box-align-center box-pack-center"
                src="https://yhlyy.oss-cn-beijing.aliyuncs.com/22921E04CEFD4E00A415DD90BF0DA800logo.png?Expires=4829622684&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=o3Hx7NOcnJbbSYtRQgtz3VL6S1s%3D">
            </el-image>
        </div>
        <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="/sy">首页</el-menu-item>
            <el-menu-item index="/production">五育通学院</el-menu-item>
            <el-menu-item index="/cooperation">渠道合作</el-menu-item>
            <el-menu-item index="/aboutUs">关于我们</el-menu-item>
        </el-menu>
        <el-button type="primary" class="free-btn" round @click="loginVisible = true">免费试用</el-button>
        <el-dialog title="" :visible.sync="loginVisible" width="382px" center :close-on-press-escape="false"
            :show-close="false" destroy-on-close :close-on-click-modal="false" @close="loginVisible = false;codeShow = false;">
            <template slot="title">
                <el-col class="box box-pack-between" v-show="forgetPasswordShow == true">
                    <i class="fs16 el-icon-back cp" @click="handleReturnForget"></i>
                    <i class="fs16 el-icon-close cp" @click="handleCloseForget"></i>
                </el-col>
                <el-col class="box box-pack-end" v-show="forgetPasswordShow == false">
                    <i class="fs16 el-icon-close cp" @click="loginVisible = false"></i>
                </el-col>
            </template>
            <div class="posr1" v-show="forgetPasswordShow == false">
                <div class="posa1 cp">
                    <span class="posa2">{{codeShow == false?'点击切换微信扫码登录':'点击手机号或验证码登录'}}</span>
                    <el-image class="img" src="/static/image_index/code.png" v-show="codeShow == false"
                        @click="handleCodeShow(true)"></el-image>
                    <el-image class="img" src="/static/image_index/pc.png" v-show="codeShow == true"
                        @click="handleCodeShow(false)"></el-image>
                </div>
                <user-login v-show="!codeShow" @handleForget="handleForget" />
                <code-login ref="childcode" v-show="codeShow == true" />
            </div>
            <div v-show="forgetPasswordShow == true">
                <forget-password @handleForget="handleForget" @handleClose="handleClose" ref="forget" />
            </div>
        </el-dialog>
    </el-header>
</template>

<script>
    import UserLogin from "./comp/UserLogin.vue";
    import CodeLogin from "./comp/CodeLogin.vue";
    import ForgetPassword from "./comp/ForgetPassword.vue";
    export default {
        components: {
            UserLogin,
            CodeLogin,
            ForgetPassword
        },
        data() {
            return {
                user: this.$store.state.user,
                loginVisible: false,
                codeShow: false,
                forgetPasswordShow: false
            }
        },
        mounted() {},
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push(key)
            },
            handleForget(e) {
                this.forgetPasswordShow = e
            },
            handleClose() {
                this.loginVisible = false
            },
            handleCloseForget() {
                this.loginVisible = false
                this.forgetPasswordShow = false
                this.$refs.forget.handleCloseNextShow()
            },
            handleReturnForget() {
                if (this.$refs["forget"].nextShow) {
                    this.$refs.forget.handleCloseNextShow()
                }else{
                    this.forgetPasswordShow = false
                }
            },
            handleCodeShow(e){
                this.codeShow = e
                if(e){
                    this.$refs.childcode.getCode()
                    // this.$refs.childcode.initSocket()
                }else{
                    this.$refs.childcode.websocketclose()
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    @import "header.scss";
</style>
<style scoped lang="scss">
    .posr1 {
        position: relative;
    }

    .posa1 {
        position: absolute;
        right: 0;
        top: 0;
        height: 70px;
    }

    .posa2 {
        position: absolute;
        right: 75px;
        top: 0;
        display: block;
        width: 160px;
        height: 20px;
        line-height: 20px;
        text-align: right;
        color: #2664ff;

        &::after {
            position: absolute;
            bottom: 4px;
            right: -16px;
            content: ' ';
            border: 6px solid transparent;
            border-left: 6px solid #2664ff;
        }
    }

    .img {
        width: 56px;
        height: 51px;
    }

    .fs16 {
        font-size: 28px;
    }
    .fixed{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100000;
        border-bottom: 1px solid #e6e6e6;
    }
    /deep/ .el-menu.el-menu--horizontal{
        border-bottom:none;
    }
</style>
